<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>
        
<script type=text/javascript src=https://gr-blogtools.googlecode.com/svn/js/jq/jquery-1.3.2.obus.js></script>
<!--       
        <script type="text/javascript" src="http://demo.haacked.com/livepreview/src/jquery.livepreview.js"></script> 
        <script type="text/javascript">
            /* 
                Extends the textarea and preview DIV with the live preview plugin.
            */
            $(function() {
                $('textarea.source').livePreview({
                    previewElement: $('div.preview'),
                    allowedTags: ['p', 'strong', 'br', 'em', 'strike'],
                    interval: 20
                });
            });
       </script>

-->
        <script type="text/javascript">

/*
* LivePreview jQuery Plugin v1.0
*
* Copyright (c) 2009 Phil Haack, http://haacked.com/
* Licensed under the MIT license.
*/

(function($) {
    $.fn.livePreview = function(options) {
        var opts = $.extend({}, $.fn.livePreview.defaults, options);
        var previewMaxIndex = opts.previewElement.length - 1;

        var allowedTagsRegExp = new RegExp("&lt;(/?(" + opts.allowedTags.join("|") + ")(\\s+.*?)?)&gt;", "g");


        return this.each(function(i) {
            var textarea = $(this);
            var preview = $(opts.previewElement[Math.min(i, previewMaxIndex)]);

            textarea.handleKeyUp = function() {
                textarea.unbind('keyup', textarea.handleKeyUp);
                if (!preview.updatingPreview) {
                    preview.updatingPreview = true;
                    window.setTimeout(function() { textarea.reloadPreview() }, opts.interval);
                }
                return false;
            };

            textarea.htmlUnencode = function(s) {
                return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
            };

            textarea.reloadPreview = function() {
                var previewString = this.val();
                if (previewString.length > 0) {
                    previewString = this.htmlUnencode(previewString);
                    previewString = previewString.replace(opts.paraRegExp, "<p>$1</p><p>$2</p>");
                    previewString = previewString.replace(opts.lineBreakRegExp, "$1<br />$2");
                    previewString = previewString.replace(allowedTagsRegExp, "<$1>");

                }

                try {
                    // Workaround for a bug in jquery 1.3.2 which is fixed in 1.4
                    preview[0].innerHTML = previewString;
                }
                catch (e) {
                    alert("Sorry, but inserting a block element within is not allowed here.");
                }

                preview.updatingPreview = false;
                this.bind('keyup', this.handleKeyUp);

            };

            textarea.reloadPreview();
        });

    };  

 //   $.fn.livePreview.defaults = {
  //      paraRegExp: new RegExp("(.*)\n\n([^#*\n\n].*)", "g"),
 //       lineBreakRegExp: new RegExp("(.*)\n([^#*\n].*)", "g"),
 //       allowedTags: ['img', 'a', 'b', 'strong', 'blockquote', 'p', 'i', 'em', 'u', 'strike', 'super', 'sub', 'code'],
//        interval: 80
 //   };  

})(jQuery);


            /* 






                Extends the textarea and preview DIV with the live preview plugin. */
 $(document).ready(function(){           
            $('#button').click(function() {
$('textarea.source').each(function(){
                $(this).livePreview({
                    previewElement: $('div.preview'),
                   allowedTags: ['textarea', 'label', 'button', 'input', 'i', 'b', 'span', 'table','tbody', 'th', 'tfoot', 'thead', 'tr', 'td', ,'var', 'sup', 'sub', 'small', 'select', 'samp', 'q', 'param', 'object', 'iframe', 'noscript', 'noframes', 'marquee', 'map', 'map', 'mailto', 'ins', 'kbd', 'frame', 'frameset', 'form', 'font', 'fieldset', 'embed', 'dfn', 'pre', 'code', 'colgroup', 'cite', 'caption', 'big', 'bgsound', 'bdo', 'basefont', 'base', 'area', 'applet', 'address', 'acronim', 'abbr', 'center', 'br', 'blink', 'dir', 'server', 'strike', 'u', 'wbr', 's', 'menu', 'ol', 'ul', 'li', 'dd', 'dl', 'dt', 'title', 'html', 'head', '!DOCTYPE', 'body', 'style', 'meta', 'script', 'link', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'blockquote', 'a', 'img', 'p', 'strong', 'em', 'strike'],
                   interval: 20
                });
            });

});
 });          

       </script>
        
        <link rel="stylesheet" href="css/HE-ClickPreview.css" type="text/css" />
    </head>
    <body>
        <div id="main">
            <h1>Live Preview jQuery Plugin Demo</h1>
            
            <p>
                Just start typing into the TextArea below. 
                The following tags are allowed: <code>['p', 'strong', 'br', 'em', 'strike']</code>
            </p>
            <p>
                Be sure to also type in tags which are not allowed.
            </p>
        <input id="button" value="PREVIEW" type="button">
            <textarea class="source"></textarea>
            
            <label>Preview Area</label>
            <div class="preview"></div>

            <hr />
            <label>The following HTML provides a textarea and div for the preview.</label>
<blockquote>
<pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">textarea</span> <span class="attr">class</span><span class="kwrd">=&quot;source&quot;</span><span class="kwrd">&gt;&lt;/</span><span class="html">textarea</span><span class="kwrd">&gt;</span>
                
<span class="kwrd">&lt;</span><span class="html">label</span><span class="kwrd">&gt;</span>Preview Area<span class="kwrd">&lt;/</span><span class="html">label</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">=&quot;preview&quot;</span><span class="kwrd">&gt;&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre>
</blockquote>
            <label>And the following JavaScript sets up the preview</label>
<blockquote>
<pre class="csharpcode">
$(<span class="kwrd">function</span>() {
    $(<span class="str">'textarea.source'</span>).livePreview({
        previewElement: $(<span class="str">'div.preview'</span>),
        allowedTags: [<span class="str">'p'</span>, <span class="str">'strong'</span>, <span class="str">'br'</span>, <span class="str">'em'</span>, <span class="str">'strike'</span>],
        interval: 20
    });
});</pre>
</blockquote>
        </div>
    </body>
</html>